<template>
  <div id="home">
    <nav-bar class="home-nav"><template v-slot:middle>购物街</template></nav-bar>
    <tab-control class="top-tab" v-show="showTopTab" :items="['流行', '新款', '精选']" @tab-click="tabChange" ref="tabControl1"/>
    <scroll class="wrapper" ref="scroll" @scroll="scrollPosition" @pulling-up="pullingUp">
      <home-swiper :banners="banner" @swiper-loaded="swiperLoaded"/>
      <home-recommend :recommend="recommend"/>
      <tab-control :items="['流行', '新款', '精选']" @tab-click="tabChange" ref="tabControl2"/>
      <goods-list  :goods="goods[showType].list"/>
    </scroll>
    <back-top @click.native="backTopClick" v-show="showBackTop"/>
  </div>
</template>

<script>
import NavBar from "@/components/common/tabbar/NavBar";
import HomeSwiper from "@/components/content/home/HomeSwiper";
import HomeRecommend from "@/components/content/home/HomeRecommend";
import TabControl from "@/components/content/home/TabControl";
import GoodsList from "@/components/content/home/GoodsList";
import Scroll from "@/components/common/scroll/Scroll";
import BackTop from "@/components/common/backTop/BackTop";

import {getHomeMultiData, getHomeGoods} from "@/network/home";

export default {
  name: "home",
  components: {
    NavBar,
    HomeSwiper,
    HomeRecommend,
    TabControl,
    GoodsList,
    Scroll,
    BackTop
  },
  data() {
    return {
      banner: [],
      recommend: [],
      goods: {
        'pop': {page: 0, list: []},
        'new': {page: 0, list: []},
        'sell': {page: 0, list: []}
      },
      showType: 'pop',
      showBackTop: false,
      tabOffsetTop: 338,
      showTopTab: false,
      scrollY: 0,
    }
  },
  mounted() {
    // 保存http响应结果
    this.getMultiData()
    this.getGoods('pop')
    this.getGoods('new')
    this.getGoods('sell')

    // BetterScroll刷新的防抖
    let timer = null
    const debounce = (func, delay) => {
      if (timer) clearTimeout(timer)
      timer = setTimeout(() => {
        func.apply(this.$refs.scroll.bs)  //这一行是this的指向问题！
      }, delay)
    }

    // BetterScroll修复，图片一加载就要刷新
    this.$bus.$on('imgLoaded', () => {
      if (this.$refs.scroll.bs) {
        debounce(this.$refs.scroll.bs.refresh, 100)  //防止bs未完成加载，null报错)
      }
    })
  },

  /**
   * 离开首页时保存当前浏览位置，进入首页时定位到上一次浏览的位置
   */
  activated() {
    if (this.$refs.scroll.bs) {
      this.$refs.scroll.bs.scrollTo(0, this.scrollY)
      this.$refs.scroll.bs.refresh()
    }
  },
  deactivated() {
    this.scrollY = this.$refs.scroll.bs.y
  },

  methods: {
    /**
     * 流行新款精选tab切换
     */
    tabChange(currentIndex) {
      switch (currentIndex) {
        case 0:
          this.showType = 'pop';
          break;
        case 1:
          this.showType = 'new';
          break;
        case 2:
          this.showType = 'sell';
          break;
      }
      this.$refs.tabControl1.curIndex = currentIndex
      this.$refs.tabControl2.curIndex = currentIndex
    },

    /**
     * 轮播图加载完毕，检测tab栏的到顶部的距离
     */
    swiperLoaded() {
      console.log(this.$refs.tabControl2.$el.offsetTop)
      this.tabOffsetTop = this.$refs.tabControl2.$el.offsetTop
    },

    /**
     *  backTop按钮点击，返回初始位置
     */
    backTopClick() {
      this.$refs.scroll.bs && this.$refs.scroll.bs.scrollTo(0, 0, 500)  //返回(x=0, y=0)处，时间500ms
    },
    /**
     * 监听BScroll的位置，来控制:backTop按钮的显示/隐藏 + tabControl的吸顶效果
     */
    scrollPosition(y) {
      this.showBackTop = y < -1000
      this.showTopTab = y < -this.tabOffsetTop
    },

    /**
     * 上拉加载更多
     */
    pullingUp() {
      this.getGoods(this.showType)
      this.$refs.scroll.bs.finishPullUp()
    },

    /**
     * 网络请求相关
     */
    getMultiData() {
      getHomeMultiData().then(res => {
        this.banner = res.data.banner.list
        this.recommend = res.data.recommend.list
      })
    },
    getGoods(type) {
      const page = ++this.goods[type].page
      getHomeGoods(type, page).then(res => {
        this.goods[type].list.push(...res.data.list)
      })
    },
  },
}
</script>

<style scoped>
#home {
}

.home-nav {
  width: 100%
}

.top-tab {
  position: absolute;
  top: 44px;
  left: 0;
  right: 0;
}

.wrapper {
  height: calc(100vh - 44px - 49px);
  overflow: hidden;
}
</style>